<template>
	<x-popup :value="value" mask-close-able z-index="10201" mode="bottom" @close="$emit('input', false)">
		<view class="introduction-container">
			<!-- 简介头部 -->
			<view class="introduction-header u-text-center">
				<view class="u-radius-83 introduction-header-img">
					<x-image :src="showImage(info.logoImgUrl, 'logo')" preview/>
				</view>
	
				<view class="u-f-36 u-lh-50 font-medio u-m-t-20">{{ info.name || '' }}</view>
	
				<view class="u-f-26 u-lh-36 color-grew u-m-t-16 linecamp-3">{{ info.desc || '' }}</view>
			</view>
	
			<view class="introduction-box">
				<scroll-view scroll-y style="height: calc(75vh - 164rpx - var(--status-bar-height));width: 100%;overflow-y: scroll;" @touchmove="touchAction" @scroll="scrollAction">
					<view class="u-f-30 u-lh-42 font-medio">{{ lang_common.service_env }}</view>
	
					<view style="width: 690rpx;">
						<view v-for="(item, index) in images(info.environmentImgUrls)" :key="index"
							class="u-p-t-20">
							<view class="service-img" @click="previewImage(images(info.environmentImgUrls, 1), index)">
								<x-image :src="showImage(item, 'logo')" mode="widthFix"/>
							</view>
						</view>
					</view>
					
					<view class="u-p-t-52 u-f-30 u-lh-42 font-medio">{{ lang_common.business_license }}</view>
						
					<view style="width: 690rpx;">
						<view v-for="(item, index) in images(info.certImgUrl)" :key="index"
							class="u-p-t-20" @click="previewImage(images(info.certImgUrl, 1), index)">
							<view class="service-img">
								<x-image :src="showImage(item, 'logo')" mode="widthFix"/>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</x-popup>
</template>

<script>
	export default {
		props: {
			value: {
				default: false,
			},
			info: {
				default: () => ({})
			}
		},
		data() {
			return {
				topCount: 0
			}
		},
		methods: {
			images(urls = '', hasBase = false) {
				return this.dealImage(urls).map(item => (!!hasBase ? this.baseUrl : '') + (item.type === 'video' ? item.cover : item.fileUrl)) || []
			},
			touchAction(e) {
				this.topCount += 1
				if (this.topCount > 1) {
					this.topCount = 0
					this.$emit('input', false)
				}
			},
			scrollAction(e) {
				this.topCount = 0
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.introduction {
		&-container {
			height: 75vh;
			width: 750rpx;
			background-color: #ffffff;
			border-top-left-radius: 44rpx;
			border-top-right-radius: 44rpx;
		}
	
		&-header {
			position: relative;
			top: -66rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 650rpx;
	
			&-img {
				margin: 0 auto;
				width: 166rpx;
				height: 166rpx;
				background-color: #f9f9f9;
				border: 10rpx solid #FFFFFF;
			}
		}
	
		&-box {
			position: relative;
			top: -18rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 690rpx;
	
			.service-img {
				border-radius: 20rpx;
				overflow: hidden;
			}
		}
	}
	
	
	.comerciante-container /deep/ .u-drawer-bottom,
	.comerciante-container /deep/ .u-mode-bottom-box {
		background: transparent!important
	}
</style>